<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tui</title>
    <!--全局重置-->
    <link rel="stylesheet" href="src/css/reset.css">
    <!--代码高亮样式-->
    <link rel="stylesheet" href="lib/highlight/styles/default.css">
    <!--字体图标-->
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
    <!--页面样式-->
    <link rel="stylesheet" href="src/css/style.css">
    <!--tui样式-->
    <link rel="stylesheet" href="src/css/tui.css">
</head>
<body>
<div class="side-bar">
    <h1 class="logo">
        <i class="fa fa-cubes"></i>
        T-UI
    </h1>
    <ul>
        <li>
            <a class="active" href="javascript:void(0)">开始</a>
        </li>
        <li>
            <a href="pages/layout/layout.html">布局</a>
        </li>
        <li>
            <a href="pages/component/component.html">组件</a>
        </li>
        <li>
            <a href="pages/interactive/interactive.html">交互</a>
        </li>
        <li>
            <a href="pages/chart/chart.html">图表</a>
        </li>
        <li>
            <a href="pages/map/map.html">地图</a>
        </li>
    </ul>
</div>
<div class="sub-side-bar">
    <ul class="level-1">
        <li>
            <a href="#start_1">代码规范</a>
            <ul class="level-2">
                <li>
                    <a href="#start_1_1">HTML规范</a>
                </li>
                <li>
                    <a href="#start_1_2">CSS规范</a>
                </li>
                <li>
                    <a href="#start_1_3">JS规范</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#start_2">目录结构</a>
        </li>
        <li>
            <a href="#start_3">依赖关系</a>
        </li>
        <li>
            <a href="#start_4">文件下载</a>
        </li>
    </ul>
</div>
<div class="content">
    <div class="content-item">
        <h1 id="start_1">
            代码规范
        </h1>
        <p>开发团队按照统一的代码规范编写，保持良好的代码习惯和风格。</p>
        <h2 id="start_1_1">HTML规范</h2>
        <ul>
            <li>
                缩进：每次使用双空格缩进，不使用tab制表符或制表符加空格的混合方式缩进
            </li>
            <li>
                空行：最多只保留一行空行，不能有空的代码块
            </li>
            <li>
                编码格式：使用UTF-8
            </li>
        </ul>
        <h2 id="start_1_2">CSS规范</h2>
        <ul>
            <li>
                缩进：每次使用双空格缩进
            </li>
            <li>
                结尾：每个属性声明末尾加“;”，在“}”后跟一个空行
            </li>
            <li>
                注释：用“/* */”，可位于一个代码行的末尾，与代码间隔一个空格
            </li>
            <li>
                命名：中划线“-”连接，如side-bar
            </li>
        </ul>
        <h2 id="start_1_3">JS规范</h2>
        <ul>
            <li>
                缩进：每次使用双空格缩进
            </li>
            <li>
                长度：
            </li>
            <li>
                对象：
            </li>
            <li>
                格式化：使用编辑器插件进行格式化
            </li>
            <li>
                命名：小驼峰，如newFunc
            </li>
        </ul>
    </div>
    <div class="content-item">
        <h1 id="start_2">
            目录结构
        </h1>
        <pre><code>lib
pages
src
|- css
|- js
|- img
|- font</code></pre>
        <ul>
            <li>
                lib：第三方拓展
            </li>
            <li>
                pages：子页面
            </li>
            <li>
                src：引入，包括css、js、img、font
            </li>
        </ul>
    </div>
    <div class="content-item">
        <h1 id="start_3">
            依赖关系
        </h1>
        <pre><code class="html">&lt;!-- 引入tui.css --&gt;
&lt;script src="/src/css/style.css"&gt;&lt;/script&gt;
&lt;!-- 引入tui.js --&gt;
&lt;script src="/src/js/main.css"&gt;&lt;/script&gt;</code></pre>
    </div>
    <div class="content-item">
        <h1 id="start_4">
            文件下载
        </h1>
        <div class="down-btn-group">
            <a href="#">Tui<span>v1.0.0</span></a>
            <a href="#">Echarts<span>v2.3.5</span></a>
            <a href="#">jQuery<span>v3.9.8</span></a>
        </div>
    </div>
</div>
</body>
</html>
<!--jquery-->
<script src="src/js/jquery.min.js"></script>
<!--代码高亮方法-->
<script src="lib/highlight/highlight.pack.js"></script>
<!--代码高亮初始化-->
<script>hljs.initHighlightingOnLoad();</script>
<!--页面脚本-->
<script src="src/js/index.js"></script>
<!--tui脚本-->
<script src="src/js/tui.js"></script>